<template>
    <div>

        <panle title='文件管理' content="文件管理"></panle>
        <div class="searchbar">
            <el-row class="pt20">
                <el-col :span="24">
                    <el-button size="mini">刷新</el-button>
                    <!-- <pers-button icon="el-icon-edit" size="mini" @click="add()" perms="sys:menu:add" type="primary" label="添加"></pers-button> -->
                    <!-- <pers-button type="danger" size="mini" icon="el-icon-delete" @click="delAll()" perms="sys:role:del" label="批量删除"></pers-button> -->
                    <pers-button icon="el-icon-s-help" size="mini" @click="cate()" perms="sys:menu:add" type="success"
                                 label="文件分类"></pers-button>
                    <pers-button icon="el-icon-upload" size="mini" perms="sys:menu:add" type="danger" label="上传文件"
                                 @click="uploadDrawer = true">
                    </pers-button>
                    <pers-button icon="el-icon-s-tools" size="mini" @click="filesDrawer = true" perms="sys:menu:add"
                                 type="primary" label="上传配置"></pers-button>
                </el-col>

            </el-row>
        </div>
        <div class="files-list">
            <el-radio-group v-model="listtype" size="small" @change="typeChange">
                <el-radio-button :label="3000" border>全部</el-radio-button>
                <el-radio-button :label="1" border>图片</el-radio-button>
                <el-radio-button :label="3" border>视频</el-radio-button>
                <el-radio-button :label="2" border>文件</el-radio-button>
                <el-radio-button :label="4" border>其它</el-radio-button>
            </el-radio-group>

            <div style="margin-right: 10px;">
                <transition name="fade-transform" mode="out-in">
                    <div class="d-c-r-l">
                        <div v-for="(item,index) in filesDate" :key="index" v-if="filesDate.length>0">
                            <div class="d-c-r-i">

                                <el-image :src="item.http_url" fit="contain" v-if="item.type==1">
                                </el-image>
                                <!-- <video :src="item.http_url" controls="controls" v-if="item.type==3" width="100%"
                                    height="100%">
                                    您的浏览器不支持 video 标签。
                                </video> -->

                                <!-- <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"
                                    :options="{autoplay:true,sources: [{type: 'video/mp4', src: item.http_url}],}" v-if="item.type==3"></video-player> -->
                                <el-image :src="require('@/assets/img/video.png')" fit="contain" v-if="item.type==3">
                                </el-image>
                                <el-image :src="require('@/assets/img/files.png')" fit="contain" v-if="item.type==2">
                                </el-image>
                                <div class="d-c-r-i-h">
                                    <i class="el-icon-download"></i>
                                    <i class="el-icon-zoom-in" @click="listshowpic(item)" v-if="item.type==1"></i>
                                    <i class="el-icon-video-play" v-if="item.type==3" @click="showVideo(item)"></i>
                                    <i class="el-icon-delete-solid" @click="delRole(item)"></i>

                                    <!-- <i class="el-icon-refresh-right"></i> -->
                                </div>
                                <div class="select-check" :class="[item.show? 'showflex' : 'hide']"><i
                                        class=" el-icon-check"></i></div>


                            </div>
                            <div class="files-title">{{item.title}}</div>
                        </div>
                        <el-empty v-if="filesDate.length<=0"></el-empty>

                    </div>
                </transition>

            </div>
            <div class="block">

                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize"
                               background
                               layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>

        </div>


        <!-- <div>
            <el-radio-group v-model="type" size="small" >
                <el-radio :label="0" border>图片</el-radio>
                <el-radio :label="1" border>视频</el-radio>
                <el-radio :label="2" border>文件</el-radio>
                <el-radio :label="3" border>其它</el-radio>
            </el-radio-group>
        </div>

        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div> -->

        <el-drawer title="上传配置" :visible.sync="filesDrawer" direction="rtl" class="filesDrawer" size="50%">
            <div class="drawer-maing">
                <el-tabs v-model="activeName" @change="radioChange">
                    <el-tab-pane label="基本配置" name="0"></el-tab-pane>

                    <el-tab-pane label="阿里云OSS" name="1"></el-tab-pane>
                    <el-tab-pane label="腾讯云COS" name="2"></el-tab-pane>
                    <el-tab-pane label="七牛云" name="3"></el-tab-pane>
                </el-tabs>
                <div>
                    <el-form :model="form" :rules="rules" ref="form" class="tabform" label-position="center"
                             label-width="160px">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="存储位置" prop="files_ares">
                                    <el-radio-group v-model="form.files_ares" size="small" @change="radioChange">
                                        <el-radio-button :label="0" border>本地</el-radio-button>
                                        <el-radio-button :label="1" border>阿里云OSS</el-radio-button>
                                        <el-radio-button :label="2" border>腾讯云COS</el-radio-button>
                                        <el-radio-button :label="3" border>七牛云</el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div :class="activeName=='0'?'show':'hidden'">

                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="上传类型限制" prop="allowExts">
                                        <el-input v-model="form.allowExts" size="mini"
                                                  placeholder="设置系统允许上传文件的后缀，多个以英文逗号隔开。如：png,jpg,rar,doc"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="上传大小限制" prop="fileSize">
                                        <el-input v-model="form.fileSize" size="mini" placeholder="设置系统允许上传文件的大小">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                        </div>
                        <div :class="activeName=='1'?'show':'hidden'">
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="Bucket名称">
                                        <el-input v-model="form.a_bucket" size="mini" placeholder="填写OSS存储空间名称，如：oss">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="EndPoint">
                                        <el-input v-model="form.a_endPoint" size="mini"
                                                  placeholder="填写OSS数据中心访问域名，如：oss-cn-shenzhen.aliyuncs.com"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="Bucket 域名">
                                        <el-input v-model="form.a_domain" size="mini"
                                                  placeholder="填写OSS存储外部访问域名，如：kyshop.oss-cn-shenzhen.aliyuncs.com">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="Access Key ID">
                                        <el-input v-model="form.a_accessKeyId" size="mini"
                                                  placeholder="可以在 [ 阿里云 > 个人中心 ] 设置并获取到访问密钥。"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="Access Key Secret">
                                        <el-input v-model="form.a_accessKeySecret" size="mini"
                                                  placeholder="可以在 [ 阿里云 > 个人中心 ] 设置并获取到安全密钥。"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                        </div>


                        <div :class="activeName=='2'?'show':'hidden'">

                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="secretId" prop="secretId">
                                        <el-input v-model="form.secretId" size="mini" placeholder="填写账户中心的 SECRETID">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="secretKey">
                                        <el-input v-model="form.secretKey" size="mini" placeholder="填写开发者拥有的 secretKey">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="存储桶名称">
                                        <el-input v-model="form.bucket" size="mini" placeholder="填写开发者拥有的存储桶地域">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="访问域名">
                                        <el-input v-model="form.domain" size="mini" placeholder="填写开发者拥有的访问域名">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="存储桶地域">
                                        <el-input v-model="form.region" size="mini" placeholder="填写开发者拥有的存储桶地域">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>


                        </div>

                        <div :class="activeName=='3'?'show':'hidden'">
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="存储空间（bucket）">
                                        <el-input v-model="form.q_bucket" size="mini"
                                                  placeholder="填写七牛云存储空间名称，如：static">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="外链域名">
                                        <el-input v-model="form.q_domain" size="mini"
                                                  placeholder="填写七牛云存储访问域名，如：static.ctolog.cc"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>


                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="AccessKey">
                                        <el-input v-model="form.q_accessKey" size="mini"
                                                  placeholder="可以在 [ 七牛云 > 个人中心 ] 设置并获取到访问密钥"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>


                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="SecretKey">
                                        <el-input v-model="form.q_secretKey" size="mini"
                                                  placeholder="可以在 [ 七牛云 > 个人中心 ] 设置并获取到安全密钥。"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                        </div>
                        <el-col :span="24">
                            <el-form-item label="">
                                <el-button type="success" size="mini" @click="submitSet" icon="fa fa-plus-circle">保存数据
                                </el-button>
                                <el-button @click="resetForm" size="mini" type="warning" icon="fa fa-recycle">重置
                                </el-button>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </div>
            </div>
        </el-drawer>

        <!-- 分类 -->
        <el-drawer title="文件分类" :visible.sync="cateDrawer" direction="rtl" class="filesDrawer" size="50%">
            <div class="searchbar" style="margin: 10px;">
                <el-row class="pt20">
                    <el-button size="mini" @click="getCate()">刷新</el-button>
                    <pers-button icon="el-icon-edit" size="mini" @click="addopen()" perms="files:cate:add"
                                 type="primary" label="添加"></pers-button>
                </el-row>
                <el-table :data="cateData" default-expand-all style="width: 100%;margin-bottom: 20px;" row-key="id"
                          :header-cell-style="{background:'#f9f9f9'}" stripe
                          :tree-props="{children: 'children', hasChildren: 'hasChildren'} " v-loading="loading">

                    <el-table-column prop="name" label="节点名称"></el-table-column>
                    <el-table-column prop="order_by" label="排序" width="100">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.sub.order_by" placeholder="请输入内容" size="mini"
                                      @input="changInput(scope.row)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template slot-scope="scope">
                            <PersButton type="text" size="mini" label="添加子节点" icon="fa fa-plus" perms="files:cate:add"
                                        @click="addopen(scope.row)"></PersButton>
                            <PersButton type="text" size="mini" label="编辑" icon="fa fa-pencil" perms="files:cate:edit"
                                        @click="editopen(scope.row)"></PersButton>
                            <PersButton type="text" size="mini" label="删除" icon="fa fa-trash" perms="files:cate:del"
                                        @click="delopen(scope.row)"></PersButton>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-drawer>


        <!-- 添加分类的弹窗 -->
        <el-dialog v-dialogDrag :visible.sync="open" width="600px" append-to-body
                   :title="!cateform.cate_id ? '新增' : '修改'">
            <el-form ref="cateform" :model="cateform" :rules="caterules" label-width="100px">
                <el-row>

                    <el-col :span="24">
                        <el-form-item label="上级节点" prop="parent_id">
                            <div style="height: 30px; line-height: 30px;">
                                <treeselect v-model="cateform.parent_id" :options="parentDate" :normalizer="normalizer"
                                            :show-count="true" placeholder="选择上级菜单"/>
                            </div>

                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label=" 分类名称" prop="cate_name">
                            <el-input v-model="cateform.cate_name" placeholder="请输入 分类名称" size="small"/>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="备注">
                            <el-input v-model="cateform.remarks" size="mini" type="textarea" :rows="4"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="排序" prop="order_by">
                            <el-input v-model="cateform.order_by" placeholder="请输入排序" size="small"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="open = false" size="small">取 消</el-button>
                <el-button type="primary" @click="!cateform.cate_id ? submitForm('cateform') : subEditForm('cateform') "
                           size="small">确 定
                </el-button>
            </div>

        </el-dialog>


        <!-- 上传文件 -->
        <el-drawer title="上传文件" :visible.sync="uploadDrawer" size="50%" class="drawer-main">


            <div style="margin: 20px;">
                <div class="upload-button">
                    <el-button type="success" size="mini" @click="submitUpload">上传服务器</el-button>
                </div>
                <el-form ref="uploadform" :model="uploadform" label-width="80px" label-position="top">
                    <el-row>

                        <el-col :span="24">
                            <el-form-item label="分类" prop="cateid">
                                <div style="height: 30px; line-height: 30px;">
                                    <treeselect v-model="uploadform.cateid" :options="parentDate"
                                                :normalizer="normalizer" :show-count="true" placeholder="选择分类"/>
                                </div>

                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <el-upload class="upload-demo" ref="upload" :action="_self.actions" :on-preview="handlePreview"
                           :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" multiple
                           list-type="picture-card" :headers="uploadHeader" :data="uploadform"
                           :on-success="uploadsuccess">
                    <i slot="default" class="el-icon-plus"></i>
                    <!-- <div class="upload-button">
                        <el-button type="success" size="mini" @click="submitUpload">上传服务器</el-button>
                    </div> -->


                </el-upload>


            </div>
        </el-drawer>
        <!-- 图片浏览 -->
        <el-dialog :visible.sync="dialogVisible" title="图片浏览" v-dialogDrag>
            <img width="100%" :src="dialogImageUrl" alt="">

        </el-dialog>
        <!-- 视频浏览 -->
        <el-dialog :visible.sync="videodialog" title="图片浏览" v-dialogDrag>
            <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"
                          :options="playerOptions" @close="colsevideo"></video-player>

        </el-dialog>
    </div>
</template>

<script>
    let _self;
    let uploads = process.env.VUE_APP_API;
    import Panle from '@/components/Panle';
    import PersButton from '@/components/PersButton';
    import {
        FilesSet,
        getFilesSet,
        getCateList,
        addCate,
        editCate,
        delCate,
        FilesListPage,
        delFiles
    } from '@/api/tool/files';
    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    import {
        getToken
    } from '@/common/token'
    import {Loading} from 'element-ui';
    import NProgress from 'nprogress'
    import 'nprogress/nprogress.css'

    export default {
        components: {
            Panle,
            PersButton,
            Treeselect
        },
        data() {
            return {

                filesDrawer: false,
                activeName: '0',
                form: {
                    'files_ares': 0,
                },

                rules: {
                    files_ares: [{
                        required: true,
                        message: "请选择存储位置",
                        trigger: "blur"
                    }],
                    allowExts: [{
                        required: true,
                        message: "允许上传的文件类型",
                        trigger: "blur"
                    }],
                    fileSize: [{
                        required: true,
                        message: "允许上传文件的大小",
                        trigger: "blur"
                    }],
                },
                cateDrawer: false,
                cateData: [],
                loading: false,
                open: false,
                cateform: {

                    'cate_name': undefined,
                    'parent_id': undefined,
                    'remarks': undefined,
                    'order_by': undefined,
                    'icon': undefined,

                },
                caterules: {

                    cate_name: [{
                        required: true,
                        message: ' 分类名称不能为空',
                        trigger: 'blur'
                    }],
                    parent_id: [{
                        required: true,
                        message: '上级ID不能为空',
                        trigger: 'blur'
                    }],
                    order_by: [{
                        required: true,
                        message: '排序不能为空',
                        trigger: 'blur'
                    }],

                },
                parentDate: [],
                listtype: 3000,
                filesDate: [], //文件数据
                pageSize: 10, //一页显示多少条
                pageNumber: 1, //当前多少页
                keyWord: '',
                total: 0, //总页数
                uploadDrawer: false, //上传窗口
                actions: uploads + '/uploads/index',
                uploadHeader: {
                    "Authorization": "Bearer " + getToken()
                },
                uploadform: {
                    cateid: undefined
                },
                fileList: [],
                dialogVisible: false,//图片浏览
                dialogImageUrl: '',
                videodialog: false,//视频浏览
                playerOptions: {
                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                    autoplay: false, //如果true,浏览器准备好时开始回放。
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false, // 导致视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{
                        type: "",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                        src: "" //url地址
                    }],
                    poster: "../../static/images/test.jpg", //你的封面地址
                    // width: document.documentElement.clientWidth, //播放器宽度
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar: {
                        timeDivider: true,
                        durationDisplay: true,
                        remainingTimeDisplay: false,
                        fullscreenToggle: true  //全屏按钮
                    }
                }
            }
        },
        created() {
            _self = this;
            _self.init();
        },
        computed: {},
        methods: {

            init() {
                NProgress.start();
                _self.getSet();
                _self.getCate();
                let param = {
                    "pageSize": _self.pageSize,
                    "pageNumber": _self.pageNumber,
                    "keyWord": _self.keyWord,
                    "type": _self.listtype,
                    "cateid": '',
                }
                FilesListPage(param).then((res) => {

                    _self.filesDate = res.data.list;
                    _self.total = res.data.total;
                    //setTimeout(()=>{
                    NProgress.done()
                    // this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                    //   loadingInstance.close();
                    // });
                    //},2000)
                })
            },

            getSet() {
                getFilesSet().then((res) => {
                    console.log(res);
                    _self.form = res.data;
                    _self.activeName = res.data.files_ares.toString();
                })
            },
            radioChange: function (e) {

                _self.activeName = e.toString();
            },
            submitSet: function () {
                _self.$refs['form'].validate((valid) => {
                    if (valid) {
                        _self.addEditSet();
                    } else {
                        return false;
                    }
                });
            },
            addEditSet: function () {
                FilesSet(_self.form).then((res) => {
                    console.log(res);
                    _self.msgSuccess(res.msg)
                    setTimeout(function () {
                        _self.filesDrawer = false;
                    }, 2000)
                    //_self.filesDrawer = false;
                })
            },
            resetForm() {
                this.$refs['form'].resetFields();
            },
            getCate() {
                _self.loading = true;
                _self.parentDate = [];
                getCateList().then((res) => {
                    _self.loading = false;
                    if (res.code == 200) {
                        console.log(res);
                        _self.cateData = res.data.filesCateTree;
                        const menu = {
                            id: 0,
                            name: '主节点',
                            children: []
                        };
                        menu.children = res.data.filesCateTree;
                        _self.parentDate.push(menu);
                    }
                })
            },
            cate() {

                _self.cateDrawer = true;
            },
            normalizer: function (node) {

                if (node.children && !node.children.length) {
                    delete node.children;
                }
                return {
                    id: node.id,
                    label: node.name,
                    children: node.children
                };
            },
            addopen: function (data) {
                _self.cateform = {

                    'cate_name': undefined,
                    'parent_id': undefined,
                    'remarks': undefined,
                    'order_by': 100,
                    'icon': undefined,
                }
                if (data != null) {
                    _self.cateform.parent_id = data.id;
                } else {
                    _self.cateform.parent_id = 0;
                }
                _self.open = true;
            },
            submitForm: function (data) {
                this.$refs[data].validate((valid) => {
                    if (valid) {
                        _self.addcate();
                    } else {
                        return false;
                    }
                });
            },
            addcate: function () {
                console.log(_self.cateform);
                addCate(_self.cateform).then((res) => {
                    console.log(res);
                    if (res.code == 200) {
                        _self.msgSuccess(res.msg)
                        _self.open = false;
                        _self.getCate();
                    } else {
                        _self.msgError(res.msg);
                    }
                })
            },
            editopen: function (data) {
                _self.open = true;
                console.log(data);
                _self.cateform.parent_id = data.parentId;
                _self.cateform.cate_id = data.id;
                let editForm = {
                    "cate_id": data.id,

                    'cate_name': data.name,
                    'parent_id': data.parentId,
                    'remarks': data.sub.remarks,
                    'order_by': data.sub.order_by,
                    'icon': data.icon,

                }
                Object.assign(_self.cateform, editForm);
            },
            subEditForm: function () {
                editCate(_self.cateform).then((res) => {
                    if (res.code == 200) {
                        _self.msgSuccess(res.msg)
                        _self.open = false;
                        _self.getCate();
                    } else {
                        _self.msgError(res.msg);
                    }
                })
            },
            delopen: function (data) {
                _self.$confirm('确定删除【' + data.name + '】此规则', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    delCate(data.id).then((res) => {
                        if (res.code == 200) {
                            _self.msgSuccess(res.msg);
                            _self.getCate();
                        } else {
                            _self.msgError(res.msg);
                        }
                    })


                }).catch(() => {
                    _self.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            delRole(data) {

                // console.log(data);return
                _self.$confirm('确定删除【' + data.fid + '】此规则', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    delFiles(data.fid).then((res) => {
                        if (res.code == 200) {
                            _self.msgSuccess(res.msg);
                            _self.init();
                        } else {
                            _self.msgError(res.msg);
                        }
                    })


                }).catch(() => {
                    _self.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            handleSizeChange: function (e) {
                console.log(e);
                _self.pageSize = e;
                _self.init();
            },
            handleCurrentChange: function (e) {
                console.log(e);
                _self.pageNumber = e;
                _self.init();
            },

            submitUpload() {

                if (_self.uploadform.cateid == undefined || _self.uploadform.cateid == null) {
                    _self.msgError("请选择分类");
                    return false;
                }


                this.$refs.upload.submit();
            },
            handlePreview(file) {
                console.log(file);
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleRemove(file) {
                console.log(file);
            },
            uploadsuccess(res) {
                console.log(res);
                if (res.code == 200) {
                    _self.init();
                    this.$refs.upload.clearFiles();
                    _self.msgSuccess(res.msg);
                    _self.uploadDrawer = false;
                } else {
                    _self.msgError(res.msg);
                }
            },
            typeChange(e) {
                console.log(e);
                _self.listtype = e;

                _self.init();
            },
            listshowpic(data) {

                this.dialogImageUrl = data.http_url;
                this.dialogVisible = true;
            },
            showVideo(data) {
                _self.playerOptions.sources[0]['src'] = data.http_url;
                this.videodialog = true;
            },
            colsevideo() {
                return this.$refs.videoPlayer.pause;
            }
        }
    }
</script>

<style lang="scss">
    .filesDrawer {
        .el-drawer__header {
            padding: 10px;
            min-height: 40px;
            background-color: #ecf5ff;
            color: #137ffe;
            margin-bottom: 0;

            .el-drawer__close-btn {
                color: #137ffe;
            }
        }
    }

    .drawer-maing {
        margin: 10px;
    }

    .show {
        display: block;
    }

    .hidden {
        display: none;
    }

    .files-list {
        margin-top: 10px;
    }

    .drawer-main {
        .el-drawer__header {
            padding: 10px;
            min-height: 40px;
            background-color: #ecf5ff;
            color: #137ffe;
            margin-bottom: 0;

            .el-drawer__close-btn {
                color: #137ffe;
            }
        }
    }

    .d-c-r-l {
        display: flex;
        flex-wrap: wrap;

        .d-c-r-i {
            width: 180px;
            height: 180px;
            margin: 10px;
            border: #f7f7f7 solid 1px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #f1f1f1;
            position: relative;

            .el-image {
                width: calc(100% - 20px);
                height: calc(100% - 20px);
                margin: 10px;

            }

            .select-check {
                position: absolute;
                top: 0px;
                right: 0px;
                width: 0;
                height: 0;
                border-top: 30px solid #67C23A;
                border-left: 30px solid transparent;
                display: none;

                i {
                    position: absolute;
                    top: -27px;
                    right: 0px;
                    color: #ffffff;
                }
            }

            .showflex {
                display: block !important;

            }

            .hide {
                display: none !important;
            }

            .d-c-r-i-h {
                background-color: rgba(0, 0, 0, 0.4);
                width: 100%;
                height: 100%;
                position: absolute;
                display: none;
                align-items: center;
                text-align: center;
                flex-wrap: wrap;
                justify-content: center;

                i {
                    font-size: 20px;
                    color: #ffffff;
                    margin: 10px;

                }
            }

        }

        .d-c-r-i:hover .d-c-r-i-h {
            display: flex !important;
        }
    }

    .files-title {
        width: 180px;
        font-size: 12px;

        margin: 10px;
        overflow: hidden;
        /*超出部分隐藏*/
        white-space: nowrap;
        /*不换行*/
        text-overflow: ellipsis;
        /*超出部分文字以...显示*/
    }
</style>
